<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <div class="type-mode-radio">
        <a-radio-group v-model="mod" class="mode-radio-group">
          <a-radio :value="1" class="mode-radio">百分比</a-radio>
          <a-radio :value="2" class="mode-radio">数量</a-radio>
        </a-radio-group>
      </div>
      <div class="type-mode">
        <div v-if="mod === 1" class="etl-sampling">
          <a-col :span="16">
            <a-slider v-model="ratio" :step="1" :min="0" :max="100" />
          </a-col>
          <a-col :span="7">
            <a-input-number
              v-model="ratio"
              placeholder="请填写"
              :min="0"
              :max="100"
              size="small"
            />
          </a-col>
          <a-col :span="1">&nbsp;%</a-col>
        </div>
        <div v-else class="etl-sampling">
          <a-col :span="24">
            <a-input-number
              v-model="count"
              placeholder="请填写"
              :min="1"
              :precision="0"
              :max="1000000"
              size="small"
            />
          </a-col>
        </div>
      </div>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">
        {{ buttonText.CONFIRM }}
      </div>
      <div class="btn cancel-btn" @click="cancelChange">
        {{ buttonText.CANCEL }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
// import {Prop} from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import { Watch } from 'vue-property-decorator'
import { cloneDeep } from 'lodash'
import { buttonText } from '@/components/studio/data/set-params/constant'

@Component
export default class EtlSample extends Vue {
  // 模式
  public mod: number = 1
  // 数量
  public count: number = 0
  // 百分比
  public ratio: number = 0

  private get selectNode() {
    return DataViewStore.selectNode
  }

  public buttonText: any = buttonText

  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    }
  }

  public created() {
    // 配置回显
    this.initSet()
  }

  public initSet() {
    this.mod = cloneDeep(this.selectNode.data.mod)
    this.count = cloneDeep(this.selectNode.data.count)
    this.ratio = cloneDeep(this.selectNode.data.ratio)
  }

  public confirm() {
    this.$emit('confirm', {
      mod: this.mod,
      count: this.count,
      ratio: this.ratio,
    })
  }

  /**
   * 重置修改
   */
  public cancelChange() {
    this.initSet()
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.type-mode-radio {
  width: 20%;

  .mode-radio-group {
    .mode-radio {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
      margin-bottom: 6px;
    }
  }
}

.type-mode {
  width: 100%;

  .etl-sampling {
    align-items: center;
    display: flex;
    height: 32px;
    margin-bottom: 12px;
    width: 100%;

    .ant-input-number {
      width: 100%;
    }
  }
}
</style>
